import React from 'react';
import { View } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

const AdaptiveBox = ({ style, children, widthPercent, heightPercent, marginPercent, paddingPercent, borderWidthPercent }) => {
  return (
    <View style={[
      style,
      {
        width: wp(widthPercent),
        height: hp(heightPercent),
        margin: hp(marginPercent),
        padding: wp(paddingPercent),
        borderWidth: wp(borderWidthPercent),
        borderColor: '#000',
      }
    ]}>
      {children}
    </View>
  );
};

export default AdaptiveBox;